import { forwardRef, useImperativeHandle, useState } from "react";

// 用户详情组件
const UserProfile = ({ ref }) => {

  const [name, setName] = useState("");
  const [age, setAge] = useState("");

  const handleNameChange = (e) => {
    const val = e.target.value;
    setName(val);
  }

  const handleAgeChange = (e) => {
    const val = e.target.value;
    setAge(val);
  }

  const getUser = () => {
    // console.log("hello boy");
    return {
      name,
      age
    }
  }

  useImperativeHandle(ref, () => ({
    getUser
  }))

	return (
		<div>
      <p>姓名: <input onChange={handleNameChange} value={name} /></p> 
      <p>年龄: <input onChange={handleAgeChange} value={age} /></p>
		</div>
	)
}

export default UserProfile;